import React, {Component} from 'react';
import {View, Text, Image, TouchableOpacity, ScrollView, Modal, TextInput} from 'react-native';
import Header from "../../../../components/header";
import {pxToDp} from "../../../../utils/styleKits";
import icon from "../../../../utils/icon";
import ThButton from "../../../../components/THButton";

// 评论页面
export default class Comments extends Component {
  state = {
    data: {
      headUrl: 'https://www.itying.com/images/flutter/list1.jpg',
      content: `陋室空堂，当年笏满床；衰草枯杨，曾为歌舞场。
          蛛丝儿结满雕梁，绿纱今又糊在蓬窗上。说什么脂正浓，粉正香，如何两鬓又成霜？`,
      imgs: [
        {url: 'https://www.itying.com/images/flutter/list1.jpg'},
        {url: 'https://www.itying.com/images/flutter/list2.jpg'},
      ],
      distance: 0,
      login: 6,
      star: 0,
      like: 1,
    },

    commentList: [
      {
        headerUrl: 'https://www.itying.com/images/flutter/list1.jpg',
        name: '四个零',
        time: Date.now(),
        content: '11111',
        starNum: 1,
      },
      {
        headerUrl: 'https://www.itying.com/images/flutter/list2.jpg',
        name: '四个零222',
        time: Date.now(),
        content: '22222',
        starNum: 4,
      },
      {
        headerUrl: 'https://www.itying.com/images/flutter/list3.jpg',
        name: '四个零3333',
        time: Date.now(),
        content: '3333333',
        starNum: 2,
      }
    ],

    visibleCom: true,
    text: '',
    num: 4,
  };

  render() {
    let {data, commentList, visibleCom, text} = this.state;
    return (
      <View style={{flex: 1}}>
        {/*header*/}
        <Header title={'最新评论'}/>

        <ScrollView>
          {/*个人信息*/}
          <View style={{borderBottomColor: '#ddd', borderBottomWidth: pxToDp(1), padding: pxToDp(10)}}>
            {/*个人信息*/}
            <View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
              <View style={{flexDirection: 'row'}}>
                <Image source={{uri: data.headUrl}} style={{
                  width: pxToDp(50),
                  height: pxToDp(50), borderRadius: pxToDp(25), marginRight: pxToDp(10)
                }}/>
                <View style={{justifyContent: 'space-between'}}>
                  <Text style>
                    一叶知秋
                    <Text style={{fontFamily: 'iconfont', color: '#ff422c'}}>{icon.icontanhuanv}</Text>
                    23岁
                  </Text>
                  <Text>单身 | 本科 | 年龄相仿</Text>
                </View>
              </View>
            </View>

            {/*内容*/}
            <Text style={{marginTop: pxToDp(20), marginBottom: pxToDp(20)}}>
              {data.content}
            </Text>

            {/*图片*/}
            <View style={{flexDirection: 'row'}}>
              {
                data.imgs.map((item, i) => {
                  return <TouchableOpacity key={i}>
                    <Image source={{uri: item.url}} style={{
                      width: pxToDp(70), height: pxToDp(70),
                      marginRight: pxToDp(10)
                    }}/>
                  </TouchableOpacity>
                })
              }
            </View>

            {/*距离、登录时间*/}
            <Text style={{
              marginTop: pxToDp(10), color: '#aaa',
              fontSize: pxToDp(12)
            }}>距离 {data.distance} km {data.login} 个月前</Text>
          </View>

          {/*最新评论、发表评论按钮*/}
          <View
            style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', padding: pxToDp(10)}}>
            <View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center',}}>
              <Text>最新评论</Text>
              <View style={{
                height: pxToDp(26), width: pxToDp(26), justifyContent: 'center', alignItems: 'center',
                backgroundColor: 'red', borderRadius: pxToDp(15), marginLeft: pxToDp(10)
              }}>
                <Text style={{color: '#fff'}}>{commentList.length}</Text>
              </View>
            </View>
            <ThButton linearStyle={{width: pxToDp(120), height: pxToDp(30), borderRadius: pxToDp(30)}}
                      children={'发表评论'} onPress={this.comment}/>
          </View>

          {/*评论列表*/}
          <View>
            {
              commentList.map((item, i) => {
                return <View key={i} style={{
                  flexDirection: 'row', padding: pxToDp(10), borderBottomColor: '#ddd',
                  borderBottomWidth: pxToDp(1), alignItems: 'center', justifyContent: 'space-between'
                }}>
                  <View style={{flexDirection: 'row', alignItems: 'center'}}>
                    <Image source={{uri: item.headerUrl}}
                           style={{width: pxToDp(50), height: pxToDp(50), borderRadius: pxToDp(25)}}/>
                    <View style={{marginLeft: pxToDp(10)}}>
                      <View style={{marginBottom: pxToDp(10)}}>
                        <Text style={{color: '#666'}}>{item.name}</Text>
                        <Text style={{color: '#666'}}>{this.handleTime(item.time)}</Text>
                      </View>
                      <Text>{item.content}</Text>
                    </View>
                  </View>

                  <View>
                    <Text style={{fontFamily: 'iconfont'}}>{icon['icondianzan-o']}{item.starNum}</Text>
                  </View>

                </View>
              })
            }
          </View>
        </ScrollView>

        {/*发表评论弹框*/}
        <Modal visible={visibleCom} animationType="slide" transparent={true}
               onRequestClose={() => this.setState({visibleCom: false})}>
          <View style={{flex: 1, position: 'relative'}}>
            <TouchableOpacity style={{flex: 1, backgroundColor: 'rgba(0,0,0,0.5)'}} onPress={this.closeModal}/>
            <View style={{
              position: 'absolute', bottom: 0, left: 0, backgroundColor: '#ddd',
              width: '100%', flexDirection: 'row', justifyContent: 'center', alignItems: 'center'
            }}>
              <TextInput autoFocus placeholder={'发表评论'}
                         style={{
                           flex: 5, height: 40, margin: pxToDp(5), marginRight: 0, borderRadius: pxToDp(20),
                           backgroundColor: '#fff'
                         }}
                         onChangeText={text => this.setState({text})}
                         value={text}
              />
              <TouchableOpacity onPress={this.sendCom}
                                style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                <Text>发送</Text>
              </TouchableOpacity>
            </View>
          </View>
        </Modal>
      </View>
    );
  }

  // 发表评论
  sendCom = () => {
    let {text, commentList, num} = this.state;
    let newDate = {
      headerUrl: `https://www.itying.com/images/flutter/list${num}.jpg`,
      name: `四个零${num}`,
      time: Date.now(),
      content: text,
      starNum: num,
    };

    commentList.unshift(newDate);

    num = num+1;
    this.setState({
      visibleCom: false,
      text: '',
      num,
      commentList,
    })

  };

  // 点击遮罩层灰色区域，关闭遮罩层
  closeModal = () => {
    this.setState({
      visibleCom: false,
      text: '',
    });
  }

  // 点击发表评论
  comment = () => {
    this.setState({
      visibleCom: true
    })
  };

  // 处理时间
  handleTime = (time) => {
    let t = new Date(time);
    let Y = t.getFullYear();
    let M = t.getMonth() + 1;
    let D = t.getDate();
    let h = t.getHours();
    let m = t.getMinutes();
    let s = t.getSeconds();

    M = String(M).length === 2 ? M : '0' + M;
    D = String(D).length === 2 ? D : '0' + D;
    h = String(h).length === 2 ? h : '0' + h;
    m = String(m).length === 2 ? m : '0' + m;
    s = String(s).length === 2 ? s : '0' + s;

    return `${Y}-${M}-${D}  ${h}:${m}:${s}`;
  }
}

